<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="header-title">文本展示组件</text>
		</view>

		<!-- 内容区域 -->
		<view class="content-wrap">
			<!-- 文本展示区域 -->
			<view class="text-display" scroll-y="true">
				<text>{{ displayText }}</text>
			</view>

			<!-- 操作按钮 -->
			<view class="btn-group">
				<button class="btn add-btn" :disabled="!canAdd" @click="addLine">
					添加一行
				</button>
				<button class="btn remove-btn" :disabled="!canRemove" @click="removeLine">
					删除一行
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// 文本数据源 - 替换为新内容
	const textSources = [
		'Vue是一套用于构建用户界面的渐进式框架',
		'React专注于构建用户界面的JavaScript库',
		'Angular是一个完整的前端框架',
		'Tailwind CSS是一个实用优先的CSS框架',
		'JavaScript是网页的编程语言',
		'TypeScript为JavaScript添加了类型系统',
		'HTML是构建网页的基础标记语言',
		'CSS用于描述网页的样式和布局',
		'Node.js让JavaScript可以运行在服务器端',
		'Webpack是一个模块打包工具',
		'Vite是新一代前端构建工具',
		'...更多技术'
	];

	// 状态管理
	const lines = ref([]);
	const maxLines = 12;

	// 计算属性
	const displayText = computed(() => lines.value.join('\n'));
	const canAdd = computed(() => lines.value.length < maxLines);
	const canRemove = computed(() => lines.value.length > 0);

	// 方法
	const addLine = () => {
		// 根据当前行数取模获取对应文本
		const index = lines.value.length % textSources.length;
		lines.value.push(textSources[index]);
	};

	const removeLine = () => {
		if (lines.value.length > 0) {
			lines.value.pop();
		}
	};
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.page-header {
		padding: 30rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eeeeee;
	}

	.header-title {
		font-size: 36rpx;
		color: #333333;
		display: block;
		text-align: center;
	}

	.content-wrap {
		padding: 20rpx;
	}

	.text-display {
		width: 100%;
		height: 400rpx;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666666;
		white-space: pre-wrap;
		/* 保留换行符 */
		box-sizing: border-box;
	}

	.btn-group {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		border: none;
		color: #ffffff;
	}

	.add-btn {
		background-color: #007aff;
	}

	.add-btn:disabled {
		background-color: #cccccc;
	}

	.remove-btn {
		background-color: #ff3b30;
	}

	.remove-btn:disabled {
		background-color: #cccccc;
	}
</style>